<template>
    <div>
        <!-- 诊断弹框 -->
        <el-dialog class="dialog-frame diagnosis-dialog" width="600" :visible.sync="showFlag" @close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false">
            <!-- 弹框标题 -->
            <div slot="title" class="title-size">
                <div class="title-icon">
                    <img src="@/assets/img/img_decorate.png" alt="">
                </div>
                <span>填写诊断</span>
            </div>

            <!-- 左侧内容 -->
            <div class="diagnosis-left">
                <h2>ICD检索</h2>
                <div>
                    <span class="u-text-left">ICD检索</span>
                    <el-input class="diagnosis-input" style="width:187px;" size="small" v-model="ICDSearching"></el-input>
                    <el-button clas type="primary" size="small" @click="getICDList">搜 索</el-button>
                </div>
                <div class="show-ICDresult" v-loading="ICDLoading" element-loading-text="加载中" element-loading-background="rgba(255,255,255,.7)">
                    <ul>
                        <li v-for="(item, index) in ICDlist" :key="index" :class="{'icd-hover':currIcdIndex === index}" @click="selectedIcdItem(item,index)">{{item.icdCode}} {{item.icdName}}</li>
                    </ul>
                </div>
                <div>
                    <span class="u-text-left">补充文字</span>
                    <el-input class="diagnosis-input" placeholder="需要选中模板才可以添加文字" v-model="supplementaryText"></el-input>
                    <el-button type="primary" size="small" class="diagnosis-btn" @click="addSelecteResult" :disabled="!currIcdItem.icdName" :title="!currIcdItem.icdName ? '请选择ICD' : ''">添加至右侧的诊断输出框</el-button>
                </div>
            </div>

            <!-- 右侧内容 -->
            <div class="diagnosis-right">
                <h2>填写诊断</h2>
                <div style="margin-bottom:5px">
                    <span style="float: left;margin-left:5px">诊断输出框</span>
                    <span style="color:#F56C6C;cursor: pointer;" @click="clearAll">全部清除</span>
                </div>
                <div class="diagnosis-result"><!--  v-loading="ICDLoading" element-loading-text="加载中" element-loading-background="rgba(255,255,255,.7)" -->
                    <ul>
                        <li v-if="showCustomIcd.icdName">自定义诊断：{{showCustomIcd.icdName}}<i class="el-icon-close table-btn-del" @click="deleteItem(1, showCustomIcd)"></i></li>
                        <li style="position: relative;" v-for="(item, index) in showIcdList" :key="index">{{item.icdName}}
                            <i class="el-icon-close table-btn-del" @click="deleteItem(2, item, index)"></i>
                        </li>
                    </ul>
                </div>
                <div style="text-align:right;">
                    <el-button type="primary" size="small" @click="showCustomMsg" >自定义诊断</el-button><!-- :loading="ICDLoading" -->
                </div>
                <div style="text-align:center;margin-top:51px">
                    <el-button type="primary" size="small" plain @click="closeDialog('diagnosisDialog')">取消</el-button>
                    <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
                </div>
            </div>
        </el-dialog>

        <!--添加自定义弹框 start-->
        <el-dialog class="dialog-frame" title="添加自定义诊断" width="600" :visible.sync="showCustomFlag" @close="showCustomFlag = false" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-input type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入自定义诊断内容" v-model="customIcdMsg">
            </el-input>
            <div style="text-align:center;margin-top:51px">
                <el-button type="primary" size="small" plain @click="showCustomFlag = false">取消</el-button>
                <el-button type="primary" size="small" @click="saveCustomMsg">保存</el-button>
            </div>
        </el-dialog>
        <!--添加自定义弹框 end -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            logId: '',
            showFlag: false,
            loading: false,
            loadingTxt: '',

            ICDlist: [], //icd列表
            ICDSearching: '', //icd搜索
            ICDLoading: false, //icd加载

            currIcdIndex: '', //是否选中icd
            currIcdItem: {}, //选中的icd信息
            supplementaryText: '', //补充文字

            showIcdList: [], //icd信息展示
            showCustomIcd: {
                id: 0,
                icdName: ''
            }, // 展示的自定义诊断

            showCustomFlag: false,
            customIcdMsg: '', // 自定义诊断
        }
    },
    methods: {
        deleteItem(type, item, index) {
            this.ICDLoading = true;
            if (type == 2) { // 删除icd
                this.showIcdList.splice(index, 1);
                this.ICDLoading = false;
            } else { // 删除自定义
                this.showCustomIcd = {};
                this.ICDLoading = false;
            }
        },
        showCustomMsg() {
            if (this.showCustomIcd.icdName) {
                this.$message.closeAll();
                this.$message({
                    type: 'warning',
                    message: '请勿选择重复的诊断'
                })
                return;
            }

            this.customIcdMsg = '';
            this.showCustomFlag = true;
        },
        saveCustomMsg() {
            if (!this.customIcdMsg) {
                this.$message.closeAll();
                this.$message({
                    type: 'error',
                    message: '自定义判断不能为空'
                })
                return;
            }
            this.showCustomFlag = false;
            this.showCustomIcd.icdName = this.customIcdMsg;
        },
        // 选择ICD
        selectedIcdItem(item, index) {
            this.currIcdIndex = index;
            this.currIcdItem = item;
        },
        // 保存至右侧诊断内容
        addSelecteResult() {
            let flag = this.showIcdList.filter(icd => icd.id === this.currIcdItem.id);
            if (flag.length > 0) {
                this.$message.closeAll();
                this.$message({
                    type: 'warning',
                    message: '请勿选择重复的诊断'
                })
            } else {
                let temp = { ...this.currIcdItem };
                if (this.supplementaryText) {
                    temp.icdName += `（${this.supplementaryText}）`
                }

                this.showIcdList.push(temp);
                this.supplementaryText = '';
                this.currIcdIndex = '';
                this.currIcdItem = {};
            }
        },
        clearAll() {
            this.ICDSearching = '';
            this.currIcdIndex = '';
            this.currIcdItem = {};
            this.supplementaryText = '';

            this.showIcdList = [];
            this.showCustomIcd = {};
        },
        // 获取ICD列表
        getICDList() {
            let para = {
                webToken: this.$authInfo.webToken(),
            }

            if (this.ICDSearching) para.keyword = this.ICDSearching;

            this.ICDLoading = true;
            this.currIcdIndex = '';
            this.currIcdItem = {};
            this.supplementaryText = '';
            this.$ajax.getIcdList(para).then(res => {
                this.ICDlist = res.data.list || [];
                this.ICDLoading = false
            }).catch(err => {
                this.ICDLoading = false

                this.$message.closeAll();
                this.$message({
                    message: err.msg,
                    type: 'error'
                })
            })
        },
        // 打开弹框
        onOpen({ logId, data } = {}) {
            this.logId = logId;
            this.showFlag = true;

            this.isSaveICDActive = ''; //是否选中icd
            this.icdMsg = []; //选中的icd信息
            this.supplementaryText = ''; //补充文字
            this.showIcdList = []; //icd信息展示
            this.showCustomIcd = {};
            if (data && data.length > 0) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].diagnosisId === 0 || data[i].diagnosisId == '0') {
                        this.showCustomIcd = {
                            id: 0,
                            icdName: data[i].diagnosis
                        }
                    } else {
                        this.showIcdList.push({
                            id: data[i].diagnosisId,
                            icdName: data[i].diagnosis
                        })
                    }
                }
            }
            this.getICDList();

        },
        // 关闭弹框
        closeDialog(flag = false) {
            this.showFlag = false;
            this.showCustomFlag = false;

            this.ICDSearching = '';

            this.$emit('closed', flag)
        },
        // 保存诊断
        onSubmit() {
            if (this.showIcdList.length < 1 && !this.showCustomIcd.icdName) {
                this.$message.closeAll();
                this.$message({
                    type: 'warning',
                    message: '请选择诊断'
                })
                return;
            }

            let params = {
                id: this.logId,
                diagnosis: []
            }

            if (this.showCustomIcd.icdName) {
                params.diagnosis.push({
                    diagnosis: this.showCustomIcd.icdName,
                    diagnosisId: 0,
                })
            }

            for (let i = 0; i < this.showIcdList.length; i++) {
                params.diagnosis.push({
                    diagnosis: this.showIcdList[i].icdName,
                    diagnosisId: this.showIcdList[i].id,
                })
            }

            this.loading = true;
            this.loadingTxt = '提交中'
            this.$ajax.updateDiagnosis(params).then(res => {
                this.loading = false;
                this.$message.closeAll();
                this.$message({
                    type: 'success',
                    message: res.msg
                });

                this.closeDialog(true)
            }).catch(err => {
                this.loading = false;
                this.$message.closeAll();
                this.$message({
                    type: 'error',
                    message: err.msg
                })
            })
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss" src="@/style/page/vedio.scss"></style> 